<script setup lang="ts">
import { defineProps } from 'vue';
// let {detailList} =defineProps(['detailList'])
// let {discountPrice} =defineProps(['discountPrice'])
// let {banners} =defineProps(['banners'])
// Define all props at once
const props = defineProps(['detailList', 'discountPrice', 'banners']);
let { detailList, discountPrice, banners } = props;
import { showImagePreview } from 'vant';
// function preview(banners: string[]) {
//     showImagePreview(
//         banners,
//     );
// }
//___________________________图片预览
import { ref } from 'vue';
import type { Ref } from 'vue';
const currentIndex: Ref<number> = ref(0)
function changeImage(index: number) {
    setTimeout(() => {
        currentIndex.value = index
    }, 200)
}
function showImage() {
    showImagePreview({
        images: banners || [],
        startPosition: currentIndex.value,
        onChange(index: number) {
            currentIndex.value = index
        }
    })
}
//————————————————————————————————————————————播放视频
const show: Ref<boolean> = ref(false);
//显示遮罩层的方法
function showVideo() {
    show.value = true
    if (videoRef.value) {
        //继续自动播放 
        videoRef.value.play()
    }
}
const videoRef: Ref<any> = ref()
//关闭遮罩层
function stopClick() {
    show.value = false
    //暂停视频声音
    videoRef.value.pause()
}
</script>
<template>
    <div class="detailCom">
        <!-- 详情页面 -->
        <div class="swipe">
            <van-swipe :initial-swipe="currentIndex" @change="changeImage" @click="showImage" indicator-color="#F66"
                :autoplay="3000">
                <!-- <van-swipe-item v-for="(banner, index) in banners" :key="index" @click="preview(banners)"> -->
                <van-swipe-item v-for="(banner, index) in banners" :key="index">
                    <van-image :src="banner" style="width: 100%; height: 375px;" />
                </van-swipe-item>
                <template #indicator="{ active, total }">
                    <div class="custom-indicator">{{ active + 1 }} / {{ total }}</div>
                </template>
            </van-swipe>
            <!-- 播放视频的按钮 -->
            <div @click="showVideo" class="video-btn">
                <van-icon size="16" name="play" />
            </div>
            <!-- 弹出播放视频的组件 -->
            <van-overlay :show="show" @click="stopClick">
                <div class="wrapper" @click.stop>
                    <video ref="videoRef" autoplay controls class="my-video"
                        src="https://vod.300hu.com/vod/product/90f8f9da-08dc-43c8-8205-bbdb60cb9fad/1091_c7db5e75f_f.mp4?source=1&h265=1092h_e1c47f736_f.mp4"></video>
                </div>
            </van-overlay>
        </div>

        <div class="detailDes">
            <h2>{{ detailList?.proname }}</h2>
            <p>
                <span style="color: red;font-size: 20px;font-weight: bold;">
                    活动价￥:{{ discountPrice.toFixed(2) }}元
                </span>
                &#x3000;
                <del>
                    原价:￥ {{ detailList?.originprice }}元
                </del>
            </p>
            <p>品牌: {{ detailList?.brand }}</p>
            <p>销量: {{ detailList?.sales }}</p>
            <p>库存: {{ detailList?.stock }}</p>
            <p>描述: {{ detailList?.desc }}</p>
        </div>
    </div>

</template>
<style lang="scss">
.detailCom {
    overflow: auto;

    .swipe {
        position: relative;

        .video-btn {
            position: absolute;
            width: 44px;
            height: 24px;
            left: calc(50% - 22px);
            bottom: 2px;
            // z-index: 99999;
            border-radius: 12px;
            border: 1px solid #f66;
            text-align: center;
            line-height: 26px;
            color: #f66;
            background-color: white;
        }

        .my-video {
            position: fixed;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .detailDes {
        padding: 10px;

    }
}
</style>